<template>
  <div>
    <el-dialog title="新增建筑物" :visible.sync="dialogVisible" width="600px" :before-close="closeEditDialog"
      :close-on-click-modal="false" :append-to-body="true">
      <el-form :model="addInfo" :rules="rules" ref="refAddInfo" label-width="100px">
        <el-form-item size="small" label="组织机构" prop="parentId"
          v-if="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'">
          <TreeSearchAdd style="width: 100%" @changeOrgId="changeOrgId" @onClear="onClear" :clearable="false"
            ref="refTreeSearchAdd">
          </TreeSearchAdd>
        </el-form-item>
        <el-form-item size="small" label="联网单位" prop="orgId">
          <el-select size="small" style="width: 100%;" clearable v-loadMore="unitMore" v-model='addInfo.orgId'
            placeholder='请选择' filterable remote :remote-method="remoteMethod" @clear="handleClear">
            <el-option v-for='item in orgList' :label='item.orgName' :value='item.id' :key='item.id'>
            </el-option>
            <div class="div_box" v-loading="unitloading" :style="unitloading ? '' : 'display: none;'"> </div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="建筑物" prop="name">
          <el-input clearable v-model.trim="addInfo.name" placeholder="请输入" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item size="small" label="建筑物性质" prop="buildingType">
          <el-select clearable v-model="addInfo.buildingType" style="width: 100%" placeholder="请选择">
            <el-option v-for="item in buildingTypeList" :label="item.name" :value="item.id" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="地区" prop="streetCode">
          <div style="display: flex; align-items: center">
            <el-select v-model="addInfo.provinceCode" placeholder="省" @change="changprovince" style="width: 400px">
              <el-option v-for="(item, i) in provinceList" :key="i" :label="item.regionName" :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addInfo.cityCode" placeholder="市" @change="changcity" style="width: 400px">
              <el-option v-for="(item, i) in cityList" :key="i" :label="item.regionName" :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addInfo.areaCode" placeholder="区" @change="changarea" style="width: 400px">
              <el-option v-for="(item, i) in areaList" :key="i" :label="item.regionName" :value="item.regionCode">
              </el-option>
            </el-select>
            <el-select v-model="addInfo.streetCode" placeholder="街道" @change="changestreet" style="width: 400px">
              <el-option v-for="(item, i) in streetList" :key="i" :label="item.regionName" :value="item.regionCode">
              </el-option>
            </el-select>
            <!-- <el-select v-model="addInfo.communityCode" placeholder="社区" @change='changecommunity' style="width: 400px">
              <el-option v-for="(item, i) in communityList" :key="i" :label="item.regionName" :value="item.regionCode">
              </el-option>
            </el-select> -->

            <!-- <el-input v-model.trim="addInfo.street" disabled placeholder="街道"></el-input> -->
            <i class="iconfont zuobiao" style="font-size: 20px; margin-left: 10px; cursor: pointer"
              @click="openMap"></i>
            <!-- <el-button icon="el-icon-map-location" @click="openMap">地图选点</el-button> -->
          </div>
        </el-form-item>

        <el-form-item size="small" label="详细地址" prop="address">
          <el-input type="textarea" :rows="2" placeholder="请输入" maxlength="100" v-model.trim="addInfo.address"
            resize="none" :autosize="{ minRows: 2, maxRows: 5 }">
          </el-input>
        </el-form-item>

        <el-form-item size="small" label="社区">
          <el-select v-model="addInfo.communityCode" clearable @change="changecommunity" style="width: 100%"
            placeholder="请选择">
            <el-option v-for="(item, i) in communityList" :key="i" :label="item.regionName" :value="item.regionCode">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="小区">
          <el-input clearable v-model.trim="addInfo.village" placeholder="请输入" maxlength="15"></el-input>
        </el-form-item>

        <!-- :label="'楼层' + index" -->
        <el-form-item size="small" :label="index == 0 ? '楼层' : ''" v-for="(domain, index) in floorsId" :key="index">
          <div style="display: flex; justify-content: space-between">
            <el-input type="input" maxlength="2" v-model.trim="domain.id1" style="width: 35%" placeholder="" oninput=" { value=value.replace(/[^\-\d]/g, '') } { value=value.replace(/\-{2,}/g, '-') } { value=value.replace(/(\d)\-/g, '$1') }
            { value=value.replace(/-(0+)/g, '0') } { value=value.replace(/^0+(\d)/, '$1') }
            {if(value<-3)value=-3} {if(value=='0')value=1} {if(value=='-0')value=-1} {if(value>49)value=49}">
            </el-input>
            至
            <el-input type="input" style="width: 35%" maxlength="2" v-model.trim="domain.id2" placeholder=""
              oninput="{ value=value.replace(/[^\-\d]/g, '') } { value=value.replace(/\-{2,}/g, '-') } { value=value.replace(/(\d)\-/g, '$1') }
            { value=value.replace(/-(0+)/g, '0') } { value=value.replace(/^0+(\d)/, '$1') }
            {if(value<-3)value=-3} {if(value=='0')value=1} {if(value=='-0')value=-1} {if(value>50)value=50}"></el-input>
            <div style="
                display: flex;
                align-items: center;
                justify-content: center;
              ">
              <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                <i class="el-icon-remove-outline zuobiao2" style="font-size: 20px; cursor: pointer"
                  @click.prevent="removeFloor(domain)"></i>
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
        <el-form-item size="small" v-if="this.floorsId.length < 2">
          <el-tooltip class="item" effect="dark" content="新增楼层" placement="bottom">
            <i class="el-icon-circle-plus-outline zuobiao2" style="font-size: 20px; cursor: pointer"
              @click="addFloor"></i>
          </el-tooltip>
        </el-form-item>
      </el-form>

      <el-dialog custom-class="menu-dialog-height" width="50%" title="选择地区" :visible.sync="innerVisible" append-to-body
        :close-on-click-modal="false">
        <div class="mapLoc" v-if="isShowMap">
          <iframe :src="reqUrl" v-if="isShowMap" frameborder="0" class="iframe" seamless scrolling="no"></iframe>
        </div>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="editSubmit" v-preventReClick="1500" class="confirm-button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import treeselect from "@riophae/vue-treeselect"; //树形选择器
import "@components/vue-treeselect.less"; //树形选择器
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect"; //Vue-Treeselect三级动态加载
import {
  reqOrgList,
  reqRegion,
  reqAdd,
  reqRegionLevel,
} from "@/api/api";
import { mapState } from "vuex";
import { handleTree } from "@utils/trans-tree";
import loadMore from "@mixin/loadMore";
import selectLoadMore from "@/components/select-load-more.vue"; //下拉加载
import $ from "jquery";
import { buildingTypeList } from '@/components/buildingTypes';
import TreeSearchAdd from "@components/TreeSearchAdd.vue";

export default {
  props: ["getLocationInfo", "getAddressflag", "orgInfo"],
  name: "",
  components: { treeselect, selectLoadMore, TreeSearchAdd },
  mixins: [loadMore],
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.children,
        };
      },
      projectList: [], //单位数据
      // ParkList: [],
      isDefenceArr: [
        {
          id: "0",
          label: "撤防",
        },
        {
          id: "1",
          label: "布防",
        },
      ],
      innerVisible: false,
      dialogVisible: false,
      buildingTypeList,
      addInfo: {
        orgId: "",
        // parkId: "",
        buildingType: "",
        name: "",
        address: "",
        lng: "",
        lat: "",
        isDefence: "1",
        childrenName: [],
        pid: "0",
        village: "", //小区
        province: "", //省
        provinceCode: "", //省行政码
        city: "", //市
        cityCode: "", //市行政码
        area: "", //区
        areaCode: "", //区行政码
        street: "", //街道
        streetCode: "", //街道行政码
        communityCode: "", //社区
        community: "",
        parentId: ""
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      communityList: [], //社区
      floorsId: [
        {
          id1: "",
          id2: "",
        },
      ],
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入建筑物名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        parentId: [
          {
            required: true,
            message: "请选择组织机构",
            trigger: ["blur", "change"],
          },
        ],
        orgId: [
          {
            required: true,
            message: "请选择联网单位",
            trigger: ["blur", "change"],
          },
        ],
        streetCode: [
          {
            required: true,
            message: "请选择地区",
            trigger: ["blur", "change"],
          },
        ],
        buildingType: [
          {
            required: true,
            message: "请选择建筑物性质",
            trigger: ["change"],
          },
        ],
        isDefence: [
          {
            required: true,
            message: "请选择布防状态",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
      },
      // reqUrl:
      //   "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      reqUrl:
        "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      isShowMap: false,
      loading: false,
      sysInstanceTotalPages: 10,
      LocationInfo: true, //判断是否从地图选的经纬度

      unitIndex: 1,
      unitPages: 10,
      unitloading: false,
      orgList: [],
      unitflag: false,
    };
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        // console.log(this.addInfo);
        if (this.user.roleName === 'TENANT_ADMIN' || this.user.roleName === 'ORG_ADMIN') {
          this.$nextTick(() => {
            if (this.orgInfo.type != 4) {
              this.$refs.refTreeSearchAdd.getDataList(this.orgInfo.orgId);//机构列表
              this.$refs.refTreeSearchAdd.getValue(this.orgInfo.orgId);//机构赋值
            } else {
              this.addInfo.orgId = this.orgInfo.orgId//单位赋值
              this.unitflag = true;
              this.$refs.refTreeSearchAdd.getDataList(this.orgInfo.parentId);//机构列表
              this.$refs.refTreeSearchAdd.getValue(this.orgInfo.parentId);//机构赋值
            }
          });
        }else{
          // 装维、联网单位管理员
          this.$nextTick(()=>{
            this.addInfo.orgId = this.orgInfo.orgId//单位赋值
            this.unitflag = true;
            this.handleClear();
          })
        }
      }
    },
    getAddressflag() {
      // console.log(this.getLocationInfo);
      if (!this.dialogVisible) return;
      this.LocationInfo = true;
      this.addInfo.lat = this.getLocationInfo.getLat;
      this.addInfo.lng = this.getLocationInfo.getLng;
      // console.log(this.getLocationInfo);
      // 先清空
      this.addInfo.province = "";
      this.addInfo.provinceCode = "";
      this.addInfo.city = "";
      this.addInfo.cityCode = "";
      this.addInfo.area = "";
      this.addInfo.areaCode = "";
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.addInfo.community = "";
      this.addInfo.communityCode = "";

      this.addInfo.province = this.getLocationInfo.province; //省
      this.addInfo.city = this.getLocationInfo.city; //市
      this.addInfo.area = this.getLocationInfo.district; //区
      this.addInfo.street = this.getLocationInfo.street;
      this.addInfo.address =
        this.getLocationInfo.getAdd == "我的位置"
          ? ""
          : this.getLocationInfo.getAdd;

      this.Region();
      this.innerVisible = false;
    },
    "addInfo.address"(e) {
      if (this.LocationInfo) return;
      this.addrHand();
    },
    "addInfo.streetCode"(e) {
      if (this.LocationInfo) return;
      this.addrHand();
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    changeOrgId(instanceId) {
      if (!this.unitflag) {
        //第一次进来不清空单位id
        this.addInfo.orgId = ''
      }
      this.unitflag = false;
      this.addInfo.parentId = instanceId.id;
      this.handleClear();
    },
    onClear() {
      this.addInfo.orgId = "";
      this.addInfo.parentId = ''
      this.handleClear();
    },
    // 清空
    handleClear() {
      this.orgName = '';
      this.unitIndex = 1;
      this.unitPages = 10;
      this.orgList = []
      this.getOrgList()
    },
    // 远程搜索
    async remoteMethod(query) {
      this.addInfo.orgId = query //保留输入的值
      this.orgName = query;
      this.unitIndex = 1;
      this.unitPages = 10;
      this.orgList = []
      this.getOrgList()
    },
    async unitMore() {
      if (this.unitIndex >= Math.ceil(this.unitPages / 10)) return
      this.unitIndex++
      this.unitloading = true;
      // 获取列表数据的方法
      await this.getOrgList()
      this.unitloading = false;
    },
    // 请求单位列表
    async getOrgList() {
      let { tenantId, userId, roleName } = this.user;
      const res = await reqOrgList({
        tenantId,
        userId,
        roleName,
        orgName: this.orgName,
        parentId: this.addInfo.parentId,
        type: "4"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgList = res.data.rows
    },
    // 查询省级行政单位
    async RegionList() {
      const res = await reqRegion();
      this.provinceList = res.data.rows;
    },
    // 根据省查询市
    async changprovince(val) {
      this.LocationInfo = false;
      this.addInfo.address = "";
      this.cityList = [];
      this.addInfo.city = "";
      this.addInfo.cityCode = "";
      this.areaList = [];
      this.addInfo.area = "";
      this.addInfo.areaCode = "";
      this.streetList = [];
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqRegionLevel(val);
      this.cityList = res.data.rows;
      this.provinceList.forEach((item) => {
        if (item.regionCode == val) {
          this.addInfo.province = item.regionName;
          return;
        }
      });
    },
    // 根据市查询区
    async changcity(val) {
      this.LocationInfo = false;
      this.addInfo.address = "";
      this.areaList = [];
      this.addInfo.area = "";
      this.addInfo.areaCode = "";
      this.streetList = [];
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqRegionLevel(val);
      this.areaList = res.data.rows;
      this.cityList.forEach((item) => {
        if (item.regionCode == val) {
          this.addInfo.city = item.regionName;
          return;
        }
      });
    },
    // 根据区查询街道
    async changarea(val) {
      this.LocationInfo = false;
      this.addInfo.address = "";
      this.streetList = [];
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqRegionLevel(val);
      this.streetList = res.data.rows;
      this.areaList.forEach((item) => {
        if (item.regionCode == val) {
          this.addInfo.area = item.regionName;
          return;
        }
      });
    },
    // 街道名字赋值
    async changestreet(val) {
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqRegionLevel(val);
      this.communityList = res.data.rows;
      this.streetList.forEach((item) => {
        if (item.regionCode == val) {
          this.addInfo.street = item.regionName;
          return;
        }
      });
    },
    // 社区名称赋值
    changecommunity(val) {
      this.addInfo.community = "";
      this.communityList.forEach((item) => {
        if (item.regionCode == val) {
          this.addInfo.community = item.regionName;
          return;
        }
      });
    },
    // 查询省级行政单位
    async Region() {
      const res = await reqRegion();
      // console.log(res);
      res.data.rows.forEach((item) => {
        if (item.regionName == this.addInfo.province) {
          this.addInfo.provinceCode = item.regionCode; //省行政码
          return;
        }
      });
      this.RegionLevel();
    },
    // 查询省级下行政单位
    async RegionLevel() {
      // 市
      if (this.addInfo.provinceCode == "") return;
      const res = await reqRegionLevel(this.addInfo.provinceCode);
      this.cityList = res.data.rows;
      res.data.rows.forEach((item) => {
        if (item.regionName == this.addInfo.city) {
          this.addInfo.cityCode = item.regionCode; //市行政码
          return;
        }
      });
      // 特殊市辖区查不到  默认选择第一个
      if (this.addInfo.cityCode == "") {
        this.addInfo.city = res.data.rows[0].regionName;
        this.addInfo.cityCode = res.data.rows[0].regionCode;
      }

      // 区
      const res2 = await reqRegionLevel(this.addInfo.cityCode);
      this.areaList = res2.data.rows;
      if (this.addInfo.area == "") return; //地图中没获取到区级不走下面
      res2.data.rows.forEach((item) => {
        if (item.regionName == this.addInfo.area) {
          this.addInfo.areaCode = item.regionCode; //区行政码
          return;
        }
      });

      // 街道
      const res3 = await reqRegionLevel(this.addInfo.areaCode);
      this.streetList = res3.data.rows;
      if (this.addInfo.street == "") return; //地图中没获取到街道不走下面
      res3.data.rows.forEach((item) => {
        if (item.regionName == this.addInfo.street) {
          this.addInfo.streetCode = item.regionCode; //街道行政码
          return;
        }
      });

      // 社区
      const res4 = await reqRegionLevel(this.addInfo.streetCode);
      this.communityList = res4.data.rows;
      if (this.addInfo.community == "") return;
      res4.data.rows.forEach((item) => {
        if (item.regionName == this.addInfo.community) {
          this.addInfo.communityCode = item.regionCode; //街道行政码
          return;
        }
      });
    },
    removeFloor(item) {
      // console.log(item);
      if (this.floorsId.length == 1) return;
      var index = this.floorsId.indexOf(item);
      if (index !== -1) {
        this.floorsId.splice(index, 1);
      }
    },
    addFloor() {
      this.$notify.closeAll();
      // if (this.floorsId.length > 1) return this.$modal.notifyWarning('最多只允许添加两个楼层信息');
      this.floorsId.push({
        id1: "",
        id2: "",
        key: Date.now(),
      });
    },

    // 新版省市区获取
    getProvince(data) {
      this.addInfo.province = data.value;
    },
    getCity(data) {
      this.addInfo.city = data.value;
    },
    getArea(data) {
      this.addInfo.area = data.value;
    },
    openMap() {
      // this.$store.commit("saveIsShowMap", true);
      this.isShowMap = true;
      this.innerVisible = true;
    },
    // 点击
    editSubmit() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          if (this.addInfo.street == "" || this.addInfo.streetCode == "") {
            return this.$modal.notifyWarning("请选择地区");
          }
          if (this.addInfo.lng == "" || this.addInfo.lat == "")
            return this.$modal.notifyWarning("请选择地区");
          let arr = [];
          let flag = false;
          let index = 0;
          this.floorsId.forEach((item, i) => {
            // console.log(item);
            if (item.id1 > item.id2) {
              index = i + 1;
              flag = true;
              return;
            }
            for (let i = item.id1; i <= item.id2; i++) {
              if (i != "") {
                arr.push(`${i}层`);
              }
            }
          });
          //  if (flag) return this.$modal.notifyWarning(`第${index}项结束楼层小于开始楼层，请检查！`)
          this.addInfo.childrenName = Array.from(new Set(arr));
          const res = await reqAdd(this.addInfo);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("添加建筑物成功");
          this.closeEditDialog();
          this.$parent.SpaceManager(); //更新建筑物列表
        }
      });
    },
    //地址转经纬度
    addrHand() {
      let that = this;
      // console.log(that.addInfo.province+that.addInfo.city+that.addInfo.area+that.addInfo.address);
      $.ajax({
        type: "get",
        dataType: "jsonp",
        data: {
          key: "44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53", // 填申请到的腾讯key
          address:
            that.addInfo.province +
            that.addInfo.city +
            that.addInfo.area +
            that.addInfo.street +
            that.addInfo.address, //具体的地址
          output: "jsonp", //返回格式：支持JSON/JSONP，默认JSON
        },
        jsonp: "callback",
        jsonpCallback: "QQmap",
        url: "https://apis.map.qq.com/ws/geocoder/v1/?",
        success: function (json) {
          // console.log(json)
          if (json.status == 0) {
            that.addInfo.lng = json.result.location.lng;
            that.addInfo.lat = json.result.location.lat;
            // console.log(that.addInfo.lat);
            // console.log(that.addInfo.lng);
            // that.$message({
            //   message: '成功获取位置的经纬度',
            //   type: 'success'
            // })
          } else {
            // that.$message.error('获取该位置经纬度失败')
          }
        },
        error: function (err) {
          // that.$message.error('异常错误，请刷新浏览器后重试')
        },
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refAddInfo.resetFields();
      this.dialogVisible = false;
      this.projectList = [];
      this.areaList = [];
      this.streetList = [];
      this.cityList = [];
      this.communityList = [];
      this.addInfo = {
        orgId: "",
        // parkId: "",
        name: "",
        address: "",
        lng: "",
        lat: "",
        isDefence: "1",
        buildingType: "",
        childrenName: [],
        pid: "0",
        village: "", //小区
        province: "", //省
        provinceCode: "", //省行政码
        city: "", //市
        cityCode: "", //市行政码
        area: "", //区
        areaCode: "", //区行政码
        street: "", //街道
        streetCode: "", //街道行政码
        community: "",
        communityCode: "",
      };
      this.floorsId = [
        {
          id1: "",
          id2: "",
        },
      ];
    },
    closeEditDialog2() {
      this.$nextTick(() => {
        this.$refs.refAddInfo.resetFields();
        this.addInfo = {
          orgId: "",
          // parkId: "",
          name: "",
          address: "",
          lng: "",
          lat: "",
          isDefence: "1",
          buildingType: "",
          childrenName: [],
          pid: "0",
          village: "", //小区
          province: "", //省
          provinceCode: "", //省行政码
          city: "", //市
          cityCode: "", //市行政码
          area: "", //区
          areaCode: "", //区行政码
          street: "", //街道
          streetCode: "", //街道行政码
          community: "",
          communityCode: "",
        };
        this.floorsId = [
          {
            id1: "",
            id2: "",
          },
        ];
      });
    },
  },
  deactivated() {
    if (this.$refs.refAddInfo != null) {
      this.closeEditDialog();
    }
    this.innerVisible = false;
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/common.less");

.mapLoc {
  height: 60vh;
  width: 100%;
  overflow-y: hidden;

  .iframe {
    width: 100%;
    height: 100%;
  }
}

// 省市区/
::v-deep .el-input.is-disabled .el-input__inner {
  border-color: @primaryBorderColor !important;
}

.zuobiao {
  color: @primaryTxtcolor !important;
}

.zuobiao2 {
  color: @primaryTxtcolor !important;
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}
</style>
